<template>
  <div class="hot-posts">
    <div class="box-body notop">
      <div class="title-theme">本月热门</div>
    </div>
    <el-row gutter="15">
      <el-col :span="24" v-for="(post, index) in remengposts" :key="post.id">
        <el-card shadow="hover" :class="['card', postClass(index)]" @click="goToLink(post.link)">
          <img :src="post.imageSrc" class="graphic" :alt="post.title">
          <div class="absolute linear-mask"></div>
          <div class="abs-center left-bottom box-body">
            <div class="mb6"><span class="badge">{{ post.views }}人已阅读</span></div>
            {{ post.title }}
          </div>
          <el-badge :value="'TOP' + (index + 1)" class="img-badge top-badge" type="danger" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {remengpostsStore} from "@/stores/remen.js";

export default {
  data() {
    return {
      remengposts:remengpostsStore(),
    };
  },
  methods: {
    goToLink(link) {
      window.location.href = link;
    },
    async load(){
      // await this.remengposts.fetchUserInfo();
      this.remengposts.loadpostsFromLocalStorage();
    },
    postClass(index) {
      switch (index) {
        case 0: return 'top1';
        case 1: return 'top2';
        case 2: return 'top3';
        default: return `top${index + 1}`;
      }
    }
  },
  computed: {
    remengposts() {
      const items = this.remengposts.remengposts;
      if (!items){
        this.load();
      }
      return items.map(item => {
        return {
          imageSrc: item.imageSrc, // 获取第一条图片 URL
          title: item.title,
          alt: item.title,
          link: item.id,
          views: item.views, // 假设 views 是 item 的一个属性
        };
      });
    },
  },
  mounted() {
    this.load();



  }
};
</script>

<style scoped>
.hot-posts {

}
.box-body.notop .title-theme {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
  background-image: linear-gradient(to right, #770fe7 0%, #30eb94 100%);
  -webkit-background-clip: text; /* 用于Safari */
  background-clip: text;
  color: transparent; /* 使文本颜色透明，显示背景渐变 */
  backdrop-filter: blur(3px) brightness(88%);
  background-color: rgba(255, 255, 255, 0.34);
  border-radius: 5px;
  padding: 10px;
}
.card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 15px;
    backdrop-filter: blur(3px) brightness(88%);
  background-color: rgba(255, 255, 255, 0.34);
  border-radius: 5px;
}
.graphic {
  width: 100%;
  height: auto;
}
.badge {
background: linear-gradient(to right, rgba(17, 203, 48, 0.5) 0%, #2575fc 100%);
  margin-right: 5px;
  color: #fff;
}
.top-badge {
  position: absolute;
  top: -6px;
  right: -6px;
}
.list-row {
  display: flex;
  margin-bottom: 10px;
}
.list-col {
  flex: 1;
}
.list-title {
  font-weight: bold;
  font-size: 16px;
}
.list-info {
  font-size: 12px;
  color: #666;
}
</style>
